<div class="jumbotron">
    <div class="container">
        <h3 class="display-4">Server info</h3>
        <h3>Emulator</h3>
        {% if emulator_version != 'N/A' %}
        <p>Server is running <strong>{{ emulator_version }}</strong> emulator.</p>
        {% else %}
        <p style="color:red !important;"><strong>{{ emulator_version }}:</strong> Server is not running an
            emulator. Or it is
            <strong>unknown</strong>.
        </p>
        {% endif %}
        <h3>ishare2 CLI version</h3>
        {% if ishare2_cli_version != 'N/A' %}
        <p>Server is running <strong>{{ ishare2_cli_version }}</strong> version of ishare2 CLI.</p>
        {% else %}
        <p style="color:red !important;"><strong>{{ ishare2_cli_version }}:</strong> <strong>ishare2 CLI</strong> is not
            installed on the
            server or it was not found. Are you running as root? <br>
            Click the button below to <strong>install it</strong>.</p>
        <button id="install-ishare2" class="btn btn-success" style="margin: 0.5rem 0;"><i class="fa fa-download"></i>
            Install ishare2
            CLI</button>
        {% endif %}
    </div>
</div>
<div class="jumbotron">
    <div class="container">
        <h3 class="display-4">What can you do from this panel?</h3>
        <p>Manage your images, download new ones, install them or delete the ones you no longer need.</p>
        <div class="card-deck">
            <div class="col-sm-6">

                <div class="card text-center dash-card">
                    <div class="card-header">
                        <h5 class="card-title">BIN Images</h5>
                    </div>
                    <div class="card-body">
                        <p class="card-text">Download and install Cisco IOS images for use with network simulation
                            software
                            such as PNetLab or <br> eve-ng.</p>
                        <a href="/download/bin" class="btn btn-outline-primary btn-xs col-lg-6">
                            <i class="fa fa-download"></i> Download images</a>
                        <a href="/installed/bin" class="btn btn-primary btn-xs col-lg-6 cust-pri"
                            style="background-image: linear-gradient(to bottom, #0066cc, #0052b5);">
                            <i class="fa fa-cog"></i> View installed</a>
                    </div>
                </div>
            </div>
            <div class="col-sm-6">

                <div class="card text-center dash-card">
                    <div class="card-header">
                        <h5 class="card-title">QEMU Images</h5>
                    </div>
                    <div class="card-body">
                        <p class="card-text">Download and install QEMU images for use with network simulation
                            software such
                            as PNetLab or <br> eve-ng.</p>
                        <a href="/download/qemu" class="btn btn-outline-primary btn-xs col-lg-6">
                            <i class="fa fa-download"></i> Download images</a>
                        <a href="/installed/qemu" class="btn btn-primary btn-xs col-lg-6 cust-pri"
                            style="background-image: linear-gradient(to bottom, #0066cc, #0052b5);">
                            <i class="fa fa-cog"></i> View installed</a>
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="card text-center dash-card">
                    <div class="card-header">
                        <h5 class="card-title">DYNAMIPS Images</h5>
                    </div>
                    <div class="card-body">
                        <p class="card-text">Download and install Dynamips images for use with network simulation
                            software
                            such as PNetLab or <br> eve-ng.
                        </p>
                        <a href="/download/dynamips" class="btn btn-outline-primary btn-xs col-lg-6">
                            <i class="fa fa-download"></i> Download images</a>
                        <a href="/installed/dynamips" class="btn btn-primary btn-xs col-lg-6 cust-pri"
                            style="background-image: linear-gradient(to bottom, #0066cc, #0052b5);">
                            <i class="fa fa-cog"></i> View installed</a>
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="card text-center dash-card">
                    <div class="card-header">
                        <h5 class="card-title">Generate License (iourc file)</h5>
                    </div>
                    <div class="card-body">
                        <p class="card-text">Click the "License" button to automatically generate a license for iol
                            images. No further interaction is needed after clicking the button.</p>
                        <button id="relicense" class="btn btn-success"><i class="fa fa-key"></i> License</button>
                        <div class="input-group current-iol-license">
                            <input type="text" disabled class="form-control" value="{{ iol_license }}"
                                id="current-iol-license">
                            <div class="input-group-append">
                                <button type="button" class="btn btn-outline-primary btn-xs btn-copy"><i
                                        class="fa fa-copy"></i>
                                    Copy</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <script>
            var copyButton = document.querySelector('.btn-copy');
            copyButton.addEventListener('click', function () {

                var inputElement = document.querySelector('#current-iol-license');
                var inputText = inputElement.value;

                var tempInput = document.createElement('input');
                tempInput.value = inputText;
                document.body.appendChild(tempInput);
                tempInput.select();
                document.execCommand('copy');
                document.body.removeChild(tempInput);
            });

            const relicenseBtn = document.getElementById('relicense');
            relicenseBtn.addEventListener('click', () => {
                fetch('/relicense', {
                    method: 'GET',
                }).then((response) => {
                    return response.json();
                }).then((result) => {
                    let msgclass;
                    result.status > 0 ? msgclass = "error" : msgclass = "success";
                    $.notify(result.message, {
                        position: "bottom right",
                        style: "bootstrap",
                        className: msgclass,
                        autoHide: true
                    });
                });
            });

            const installIshare2Btn = document.querySelector('#install-ishare2');
            installIshare2Btn.addEventListener('click', () => {
                fetch('/install/ishare2', {
                    method: 'GET',
                }).then((response) => {
                    return response.json();
                }).then((result) => {
                    let msgclass;
                    result.status > 0 ? msgclass = "error" : msgclass = "success";
                    $.notify(result.message, {
                        position: "bottom right",
                        style: "bootstrap",
                        className: msgclass,
                        autoHide: true
                    });
                });
            })

        </script>